 <!DOCTYPE html>
     <html lang="zh-CN">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>博沃智慧 - 智能助手</title>
         <script src="https://cdn.tailwindcss.com"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
         <style>
             :root {
                 --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                 --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                 --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                 --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
             }

             * {
                 box-sizing: border-box;
             }

             body {
                 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                 background: #f8fafc;
             }

             /* 自定义滚动条 */
             .custom-scrollbar::-webkit-scrollbar {
                 width: 6px;
             }
             .custom-scrollbar::-webkit-scrollbar-track {
                 background: #f1f5f9;
                 border-radius: 3px;
             }
             .custom-scrollbar::-webkit-scrollbar-thumb {
                 background: #cbd5e1;
                 border-radius: 3px;
             }
             .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                 background: #94a3b8;
             }

             /* 侧边栏动画 */
             .sidebar {
                 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             }
             .sidebar-collapsed {
                 width: 64px !important;
             }
             .sidebar-expanded {
                 width: 15% !important;
             }

             /* 文本淡入淡出 */
             .fade-text {
                 transition: opacity 0.3s ease-in-out;
             }
             .fade-text.hidden {
                 opacity: 0;
                 pointer-events: none;
             }

             /* 处理节点动画 */
             .processing-node {
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 position: relative;
                 overflow: hidden;
             }
             .processing-node::before {
                 content: '';
                 position: absolute;
                 top: 0;
                 left: -100%;
                 width: 100%;
                 height: 100%;
                 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
                 transition: left 0.6s;
             }
             .processing-node:hover::before {
                 left: 100%;
             }
             .processing-node:hover {
                 transform: translateX(8px);
                 box-shadow: 0 8px 25px rgba(0,0,0,0.15);
             }
             .processing-node.active {
                 background: var(--primary-gradient);
                 color: white;
                 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
             }

             /* 结果面板 */
             .result-panel {
                 transition: all 0.3s ease;
                 border: 2px solid transparent;
             }
             .result-panel:hover {
                 transform: translateY(-2px);
                 box-shadow: 0 12px 30px rgba(0,0,0,0.1);
             }
             .result-panel.active {
                 border-color: #667eea;
                 background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
                 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
             }

             /* 聊天消息动画 */
             .chat-message {
                 animation: messageSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
             }
             @keyframes messageSlideIn {
                 from {
                     opacity: 0;
                     transform: translateY(30px) scale(0.95);
                 }
                 to {
                     opacity: 1;
                     transform: translateY(0) scale(1);
                 }
             }

             /* Todo项动画 */
             .todo-item {
                 animation: todoFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
             }
             @keyframes todoFadeIn {
                 from {
                     opacity: 0;
                     transform: translateX(-20px);
                 }
                 to {
                     opacity: 1;
                     transform: translateX(0);
                 }
             }

             /* 语音输入动画 */
             .voice-recording {
                 animation: voicePulse 1.5s ease-in-out infinite;
             }
             @keyframes voicePulse {
                 0%, 100% {
                     transform: scale(1);
                     box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
                 }
                 50% {
                     transform: scale(1.05);
                     box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
                 }
             }

             /* 附件按钮 */
             .attachment-btn {
                 transition: all 0.2s ease;
                 position: relative;
             }
             .attachment-btn:hover {
                 transform: translateY(-2px);
             }
             .attachment-btn::after {
                 content: attr(data-tooltip);
                 position: absolute;
                 bottom: 100%;
                 left: 50%;
                 transform: translateX(-50%);
                 background: #1f2937;
                 color: white;
                 padding: 4px 8px;
                 border-radius: 4px;
                 font-size: 12px;
                 white-space: nowrap;
                 opacity: 0;
                 pointer-events: none;
                 transition: opacity 0.2s;
             }
             .attachment-btn:hover::after {
                 opacity: 1;
             }

             /* 加载动画 */
             .loading-dots {
                 display: inline-flex;
                 gap: 4px;
             }
             .loading-dots span {
                 width: 8px;
                 height: 8px;
                 background: #667eea;
                 border-radius: 50%;
                 animation: loadingBounce 1.4s ease-in-out infinite both;
             }
             .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
             .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
             @keyframes loadingBounce {
                 0%, 80%, 100% {
                     transform: scale(0);
                 }
                 40% {
                     transform: scale(1);
                 }
             }

             /* 玻璃态效果 */
             .glass-effect {
                 background: rgba(255, 255, 255, 0.95);
                 backdrop-filter: blur(10px);
                 border: 1px solid rgba(255, 255, 255, 0.2);
             }

             /* 进度条 */
             .progress-bar {
                 height: 3px;
                 background: linear-gradient(90deg, #667eea, #764ba2);
                 border-radius: 2px;
                 transition: width 0.3s ease;
             }
         </style>
     </head>
     <body class="bg-slate-50">
         <div class="flex h-screen overflow-hidden">
             <!-- 左侧边栏 -->
             <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
                 <!-- 应用标题 -->
                 <div class="p-6 border-b border-slate-200" style="margin:0px">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center space-x-3">
                             <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center
      shadow-lg">
                                 <i class="fas fa-brain text-white text-lg"></i>
                             </div>
                             <div class="fade-text">
                                 <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text 
     text-transparent">博沃智慧</h1>
                                 <p class="text-xs text-slate-500">智能助手</p>
                             </div>
                         </div>
                         <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                             <i class="fas fa-bars text-slate-600"></i>
                         </button>
                     </div>
                 </div>

                 <!-- 对话记录 -->
                 <div class="flex-1 overflow-y-auto custom-scrollbar">
                     <div class="p-4">
                         <div class="flex items-center justify-between mb-4">
                             <h3 class="fade-text font-semibold text-slate-700">对话历史</h3>
                             <button class="fade-text p-2 rounded-lg bg-indigo-500 text-white hover:bg-indigo-600 transition-colors">
                                 <i class="fas fa-plus text-sm"></i>
                             </button>
                         </div>

                         <div class="space-y-2">
                             <!-- 对话项 -->
                             <div class="conversation-item group relative p-4 rounded-xl bg-slate-50 hover:bg-slate-100 cursor-pointer 
     transition-all duration-200">
                                 <div class="flex items-start justify-between">
                                     <div class="fade-text flex-1">
                                         <div class="flex items-center space-x-2 mb-1">
                                             <i class="fas fa-chart-line text-indigo-500 text-sm"></i>
                                             <p class="font-medium text-slate-800 text-sm">深圳AQI趋势分析</p>
                                         </div>
                                         <p class="text-xs text-slate-500">今天 14:30</p>
                                     </div>
                                     <button class="fade-text opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-red-100 text-red-500 
     transition-all">
                                         <i class="fas fa-trash text-xs"></i>
                                     </button>
                                 </div>
                             </div>

                             <div class="conversation-item group relative p-4 rounded-xl hover:bg-slate-50 cursor-pointer transition-all 
     duration-200">
                                 <div class="flex items-start justify-between">
                                     <div class="fade-text flex-1">
                                         <div class="flex items-center space-x-2 mb-1">
                                             <i class="fas fa-code text-green-500 text-sm"></i>
                                             <p class="font-medium text-slate-800 text-sm">代码审查优化</p>
                                         </div>
                                         <p class="text-xs text-slate-500">今天 10:15</p>
                                     </div>
                                     <button class="fade-text opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-red-100 text-red-500 
     transition-all">
                                         <i class="fas fa-trash text-xs"></i>
                                     </button>
                                 </div>
                             </div>

                             <div class="conversation-item group relative p-4 rounded-xl hover:bg-slate-50 cursor-pointer transition-all 
     duration-200">
                                 <div class="flex items-start justify-between">
                                     <div class="fade-text flex-1">
                                         <div class="flex items-center space-x-2 mb-1">
                                             <i class="fas fa-file-alt text-blue-500 text-sm"></i>
                                             <p class="font-medium text-slate-800 text-sm">数据报告生成</p>
                                         </div>
                                         <p class="text-xs text-slate-500">昨天 16:45</p>
                                     </div>
                                     <button class="fade-text opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-red-100 text-red-500 
     transition-all">
                                         <i class="fas fa-trash text-xs"></i>
                                     </button>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- 用户信息 -->
                 <div class="p-4 border-t border-slate-200">
                     <div class="flex items-center space-x-3">
                         <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center 
     shadow-lg">
                             <i class="fas fa-user text-white text-lg"></i>
                         </div>
                         <div class="fade-text flex-1">
                             <p class="font-semibold text-slate-800">张晓明</p>
                             <p class="text-xs text-slate-500">专业版用户</p>
                         </div>
                         <div class="fade-text flex space-x-1">
                             <button class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                                 <i class="fas fa-user-circle text-slate-600"></i>
                             </button>
                             <button class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                                 <i class="fas fa-cog text-slate-600"></i>
                             </button>
                         </div>
                     </div>
                 </div>
             </div>

             <!-- 中间问答界面 -->
             <div class="flex-1 flex flex-col bg-white" style="width: 40%;">
                 <!-- 聊天区域 -->
                 <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
                     <!-- 用户消息 -->
                     <div class="chat-message flex justify-end">
                         <div class="flex items-start space-x-3 max-w-[80%]">
                             <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-br-sm p-4 shadow-lg">
                                 <p class="text-white text-sm leading-relaxed">最近一个月深圳市的AQI变化趋势，请帮我分析一下</p>
                             </div>
                             <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center 
     shadow-md">
                                 <i class="fas fa-user text-white text-sm"></i>
                             </div>
                         </div>
                     </div>

                     <!-- AI响应 -->
                     <div class="chat-message flex justify-start">
                         <div class="flex items-start space-x-3 max-w-[90%]">
                             <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center 
     shadow-md">
                                 <i class="fas fa-robot text-white text-sm"></i>
                             </div>
                             <div class="glass-effect rounded-2xl p-6 shadow-xl border border-slate-200">
                                 <div class="mb-4">
                                     <p class="text-slate-700 text-sm leading-relaxed mb-3">
                                         我理解您的需求，正在为您分析深圳最近一个月的AQI变化趋势。让我制定一个完整的处理计划：
                                     </p>
                                 </div>

                                 <!-- 进度条 -->
                                 <div class="mb-6">
                                     <div class="flex justify-between text-xs text-slate-500 mb-2">
                                         <span>处理进度</span>
                                         <span id="progressText">20%</span>
                                     </div>
                                     <div class="w-full bg-slate-200 rounded-full h-2">
                                         <div id="progressBar" class="progress-bar" style="width: 20%"></div>
                                     </div>
                                 </div>

                                 <!-- Todo List -->
                                 <div class="space-y-3">
                                     <div class="todo-item processing-node active p-4 rounded-xl border-2 border-green-200 bg-white 
     cursor-pointer" data-step="1">
                                         <div class="flex items-center justify-between">
                                             <div class="flex items-center space-x-3">
                                                 <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
                                                     <i class="fas fa-check text-white text-xs"></i>
                                                 </div>
                                                 <div>
                                                     <p class="font-medium text-slate-800">1. 需求分析</p>
                                                     <p class="text-xs text-slate-500 mt-1">已理解用户需要深圳AQI趋势分析</p>
                                                 </div>
                                             </div>
                                             <span class="text-xs text-green-600 font-medium">已完成</span>
                                         </div>
                                     </div>

                                     <div class="todo-item processing-node p-4 rounded-xl border-2 border-blue-200 bg-white cursor-pointer" 
     data-step="2">
                                         <div class="flex items-center justify-between">
                                             <div class="flex items-center space-x-3">
                                                 <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                                                     <div class="loading-dots">
                                                         <span></span>
                                                         <span></span>
                                                         <span></span>
                                                     </div>
                                                 </div>
                                                 <div>
                                                     <p class="font-medium text-slate-800">2. SQL生成</p>
                                                     <p class="text-xs text-slate-500 mt-1">正在生成查询语句</p>
                                                 </div>
                                             </div>
                                             <span class="text-xs text-blue-600 font-medium">处理中</span>
                                         </div>
                                     </div>

                                     <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" 
     data-step="3">
                                         <div class="flex items-center justify-between">
                                             <div class="flex items-center space-x-3">
                                                 <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                     <i class="fas fa-database text-white text-xs"></i>
                                                 </div>
                                                 <div>
                                                     <p class="font-medium text-slate-800">3. 数据查询</p>
                                                     <p class="text-xs text-slate-500 mt-1">执行SQL获取AQI数据</p>
                                                 </div>
                                             </div>
                                             <span class="text-xs text-slate-500 font-medium">等待中</span>
                                         </div>
                                     </div>

                                     <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" 
     data-step="4">
                                         <div class="flex items-center justify-between">
                                             <div class="flex items-center space-x-3">
                                                 <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                     <i class="fas fa-chart-bar text-white text-xs"></i>
                                                 </div>
                                                 <div>
                                                     <p class="font-medium text-slate-800">4. 数据处理</p>
                                                     <p class="text-xs text-slate-500 mt-1">清洗和分析数据</p>
                                                 </div>
                                             </div>
                                             <span class="text-xs text-slate-500 font-medium">等待中</span>
                                         </div>
                                     </div>

                                     <div class="todo-item processing-node p-4 rounded-xl border-2 border-slate-200 bg-white cursor-pointer" 
     data-step="5">
                                         <div class="flex items-center justify-between">
                                             <div class="flex items-center space-x-3">
                                                 <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center">
                                                     <i class="fas fa-file-chart text-white text-xs"></i>
                                                 </div>
                                                 <div>
                                                     <p class="font-medium text-slate-800">5. 生成报告</p>
                                                     <p class="text-xs text-slate-500 mt-1">创建图表和业务解读</p>
                                                 </div>
                                             </div>
                                             <span class="text-xs text-slate-500 font-medium">等待中</span>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>

                 <!-- 输入区域 -->
                 <div class="border-t border-slate-200 p-4 bg-white">
                     <div class="flex items-end space-x-3">
                         <div class="flex-1">
                             <textarea 
                                 id="userInput"
                                 class="w-full p-4 border-2 border-slate-200 rounded-xl resize-none focus:outline-none focus:border-indigo-500
      focus:ring-4 focus:ring-indigo-50 transition-all"
                                 placeholder="输入您的问题..."
                                 rows="1"
                             ></textarea>

                             <!-- 附件选项 -->
                             <div class="flex items-center justify-between mt-3">
                                 <div class="flex items-center space-x-2">
                                     <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="上传图片">
                                         <i class="fas fa-image text-slate-600"></i>
                                     </button>
                                     <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="上传文件">
                                         <i class="fas fa-file text-slate-600"></i>
                                     </button>
                                     <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="代码片段">
                                         <i class="fas fa-code text-slate-600"></i>
                                     </button>
                                     <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="MCP工具">
                                         <i class="fas fa-plug text-slate-600"></i>
                                     </button>
                                     <button class="attachment-btn p-2 rounded-lg hover:bg-slate-100 transition-all" data-tooltip="智能代理">
                                         <i class="fas fa-microchip text-slate-600"></i>
                                     </button>
                                     <div class="w-px h-6 bg-slate-300 mx-2"></div>
                                     <button id="voiceBtn" class="attachment-btn p-2 rounded-lg hover:bg-red-100 transition-all" 
     data-tooltip="语音输入">
                                         <i class="fas fa-microphone text-slate-600"></i>
                                     </button>
                                 </div>

                                 <div class="flex items-center space-x-2">
                                     <span class="text-xs text-slate-400">按 Enter 发送</span>
                                     <button class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-3 rounded-xl 
     hover:from-indigo-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl">
                                         <i class="fas fa-paper-plane"></i>
                                     </button>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>

             <!-- 右侧结果面板 -->
             <div class="bg-slate-50 border-l border-slate-200 flex flex-col" style="width: 45%;">
                 <!-- 标题栏 -->
                 <div class="bg-white border-b border-slate-200 p-6">
                     <div class="flex items-center justify-between">
                         <div>
                             <h2 class="font-bold text-slate-800 text-lg">处理结果</h2>
                             <p class="text-sm text-slate-500">实时展示模型处理过程和输出结果</p>
                         </div>
                         <div class="flex items-center space-x-2">
                             <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                             <span class="text-xs text-slate-500">实时更新</span>
                         </div>
                     </div>
                 </div>

                 <!-- 结果内容 -->
                 <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4">
                     <!-- SQL生成结果 -->
                     <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="2">
                         <div class="flex items-center justify-between mb-4">
                             <h3 class="font-semibold text-slate-800 flex items-center">
                                 <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                                     <i class="fas fa-database text-blue-600"></i>
                                 </div>
                                 SQL查询语句
                             </h3>
                             <div class="flex items-center space-x-2">
                                 <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">步骤 2</span>
                                 <button class="text-slate-400 hover:text-slate-600">
                                     <i class="fas fa-copy"></i>
                                 </button>
                             </div>
                         </div>
                         <div class="bg-slate-900 text-slate-100 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                             <pre class="text-green-400">-- 深圳市最近30天AQI数据查询
     SELECT
         date,
         aqi_value,
         pm25,
         pm10,
         no2,
         so2,
         co,
         o3,
         quality_level,
         primary_pollutant
     FROM air_quality_data
     WHERE city = '深圳市'
         AND date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY)
     ORDER BY date ASC
     LIMIT 1000;</pre>
                         </div>
                     </div>

                     <!-- 数据查询结果 -->
                     <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="3">
                         <div class="flex items-center justify-between mb-4">
                             <h3 class="font-semibold text-slate-800 flex items-center">
                                 <div class="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                     <i class="fas fa-table text-green-600"></i>
                                 </div>
                                 查询结果预览
                             </h3>
                             <div class="flex items-center space-x-2">
                                 <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">步骤 3</span>
                                 <span class="text-xs text-slate-500">共 30 条记录</span>
                             </div>
                         </div>

                         <div class="overflow-x-auto">
                             <table class="w-full text-sm">
                                 <thead class="bg-slate-50">
                                     <tr>
                                         <th class="text-left p-3 font-semibold text-slate-700">日期</th>
                                         <th class="text-left p-3 font-semibold text-slate-700">AQI</th>
                                         <th class="text-left p-3 font-semibold text-slate-700">PM2.5</th>
                                         <th class="text-left p-3 font-semibold text-slate-700">等级</th>
                                         <th class="text-left p-3 font-semibold text-slate-700">主要污染物</th>
                                     </tr>
                                 </thead>
                                 <tbody class="divide-y divide-slate-200">
                                     <tr class="hover:bg-slate-50">
                                         <td class="p-3">2024-01-15</td>
                                         <td class="p-3"><span class="font-medium text-green-600">45</span></td>
                                         <td class="p-3">32</td>
                                         <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs 
     rounded-full">优</span></td>
                                         <td class="p-3 text-slate-500">-</td>
                                     </tr>
                                     <tr class="hover:bg-slate-50">
                                         <td class="p-3">2024-01-14</td>
                                         <td class="p-3"><span class="font-medium text-green-600">52</span></td>
                                         <td class="p-3">38</td>
                                         <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs 
     rounded-full">优</span></td>
                                         <td class="p-3 text-slate-500">-</td>
                                     </tr>
                                     <tr class="hover:bg-slate-50">
                                         <td class="p-3">2024-01-13</td>
                                         <td class="p-3"><span class="font-medium text-yellow-600">68</span></td>
                                         <td class="p-3">49</td>
                                         <td class="p-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs 
     rounded-full">良</span></td>
                                         <td class="p-3 text-slate-500">PM2.5</td>
                                     </tr>
                                     <tr class="hover:bg-slate-50">
                                         <td class="p-3">2024-01-12</td>
                                         <td class="p-3"><span class="font-medium text-yellow-600">73</span></td>
                                         <td class="p-3">55</td>
                                         <td class="p-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs 
     rounded-full">良</span></td>
                                         <td class="p-3 text-slate-500">PM2.5</td>
                                     </tr>
                                     <tr class="hover:bg-slate-50">
                                         <td class="p-3">2024-01-11</td>
                                         <td class="p-3"><span class="font-medium text-green-600">58</span></td>
                                         <td class="p-3">42</td>
                                         <td class="p-3"><span class="px-2 py-1 bg-green-100 text-green-700 text-xs 
     rounded-full">优</span></td>
                                         <td class="p-3 text-slate-500">-</td>
                                     </tr>
                                 </tbody>
                             </table>
                         </div>
                     </div>

                     <!-- 最终分析结果 -->
                     <div class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6" data-result="5">
                         <div class="flex items-center justify-between mb-6">
                             <h3 class="font-semibold text-slate-800 flex items-center">
                                 <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                     <i class="fas fa-chart-line text-purple-600"></i>
                                 </div>
                                 AQI趋势分析结果
                             </h3>
                             <div class="flex items-center space-x-2">
                                 <span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full">最终结果</span>
                                 <button class="text-slate-400 hover:text-slate-600">
                                     <i class="fas fa-download"></i>
                                 </button>
                             </div>
                         </div>

                         <!-- 图表 -->
                         <div class="mb-6">
                             <canvas id="aqiChart" width="400" height="250"></canvas>
                         </div>

                         <!-- 统计卡片 -->
                         <div class="grid grid-cols-2 gap-4 mb-6">
                             <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg">
                                 <div class="flex items-center justify-between">
                                     <div>
                                         <p class="text-sm text-slate-600">平均AQI</p>
                                         <p class="text-2xl font-bold text-indigo-600">58.2</p>
                                     </div>
                                     <i class="fas fa-chart-bar text-indigo-400 text-2xl"></i>
                                 </div>
                             </div>
                             <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 rounded-lg">
                                 <div class="flex items-center justify-between">
                                     <div>
                                         <p class="text-sm text-slate-600">优良天数</p>
                                         <p class="text-2xl font-bold text-green-600">100%</p>
                                     </div>
                                     <i class="fas fa-leaf text-green-400 text-2xl"></i>
                                 </div>
                             </div>
                         </div>

                         <!-- 业务解读 -->
                         <div class="bg-gradient-to-r from-indigo-50 to-purple-50 border-l-4 border-indigo-400 p-5 rounded-lg">
                             <h4 class="font-semibold text-indigo-800 mb-3 flex items-center">
                                 <i class="fas fa-lightbulb mr-2"></i>
                                 智能业务解读
                             </h4>
                             <div class="space-y-2 text-sm text-indigo-700">
                                 <div class="flex items-start space-x-2">
                                     <i class="fas fa-check-circle text-indigo-500 mt-0.5"></i>
                                     <p>过去30天深圳AQI平均值为58.2，空气质量整体优良</p>
                                 </div>
                                 <div class="flex items-start space-x-2">
                                     <i class="fas fa-check-circle text-indigo-500 mt-0.5"></i>
                                     <p>AQI值在45-73之间波动，无异常升高趋势</p>
                                 </div>
                                 <div class="flex items-start space-x-2">
                                     <i class="fas fa-check-circle text-indigo-500 mt-0.5"></i>
                                     <p>优等级天数占比60%，良等级天数占比40%</p>
                                 </div>
                                 <div class="flex items-start space-x-2">
                                     <i class="fas fa-exclamation-triangle text-yellow-500 mt-0.5"></i>
                                     <p>主要污染物为PM2.5，建议加强工业排放管控</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

         <script>
             // 侧边栏折叠功能
             const sidebar = document.getElementById('sidebar');
             const sidebarToggle = document.getElementById('sidebarToggle');
             const fadeTexts = document.querySelectorAll('.fade-text');

             sidebarToggle.addEventListener('click', () => {
                 const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

                 sidebar.classList.toggle('sidebar-collapsed');
                 sidebar.classList.toggle('sidebar-expanded');

                 // 延迟显示/隐藏文本，等待侧边栏动画完成
                 setTimeout(() => {
                     fadeTexts.forEach(text => {
                         if (sidebar.classList.contains('sidebar-collapsed')) {
                             text.classList.add('hidden');
                         } else {
                             text.classList.remove('hidden');
                         }
                     });
                 }, isCollapsed ? 0 : 200);
             });

             // 处理节点和结果面板联动
             const processingNodes = document.querySelectorAll('.processing-node');
             const resultPanels = document.querySelectorAll('.result-panel');

             processingNodes.forEach(node => {
                 node.addEventListener('click', () => {
                     const step = node.dataset.step;

                     // 移除所有active状态
                     processingNodes.forEach(n => n.classList.remove('active'));
                     resultPanels.forEach(p => p.classList.remove('active'));

                     // 添加active状态
                     node.classList.add('active');

                     // 找到对应的结果面板
                     const correspondingPanel = document.querySelector(`[data-result="${step}"]`);
                     if (correspondingPanel) {
                         correspondingPanel.classList.add('active');
                         correspondingPanel.scrollIntoView({
                             behavior: 'smooth',
                             block: 'center',
                             inline: 'nearest'
                         });
                     }
                 });
             });

             // 结果面板点击联动
             resultPanels.forEach(panel => {
                 panel.addEventListener('click', () => {
                     const result = panel.dataset.result;

                     // 移除所有active状态
                     processingNodes.forEach(n => n.classList.remove('active'));
                     resultPanels.forEach(p => p.classList.remove('active'));

                     // 添加active状态
                     panel.classList.add('active');

                     // 找到对应的处理节点
                     const correspondingNode = document.querySelector(`[data-step="${result}"]`);
                     if (correspondingNode) {
                         correspondingNode.classList.add('active');
                         correspondingNode.scrollIntoView({
                             behavior: 'smooth',
                             block: 'center',
                             inline: 'nearest'
                         });
                     }
                 });
             });

             // 语音输入功能
             const voiceBtn = document.getElementById('voiceBtn');
             let isRecording = false;

             voiceBtn.addEventListener('click', () => {
                 isRecording = !isRecording;

                 if (isRecording) {
                     voiceBtn.classList.add('voice-recording', 'bg-red-100');
                     voiceBtn.innerHTML = '<i class="fas fa-stop text-red-600"></i>';

                     // 模拟语音识别
                     setTimeout(() => {
                         document.getElementById('userInput').value = '最近一个月深圳市的AQI变化趋势分析';
                         isRecording = false;
                         voiceBtn.classList.remove('voice-recording', 'bg-red-100');
                         voiceBtn.innerHTML = '<i class="fas fa-microphone text-slate-600"></i>';
                     }, 3000);
                 } else {
                     voiceBtn.classList.remove('voice-recording', 'bg-red-100');
                     voiceBtn.innerHTML = '<i class="fas fa-microphone text-slate-600"></i>';
                 }
             });

             // 输入框自动调整高度
             const userInput = document.getElementById('userInput');
             userInput.addEventListener('input', function() {
                 this.style.height = 'auto';
                 this.style.height = Math.min(this.scrollHeight, 120) + 'px';
             });

             // Enter键发送消息
             userInput.addEventListener('keypress', function(e) {
                 if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault();
                     // 这里可以添加发送消息的逻辑
                 }
             });

             // 对话记录删除
             document.querySelectorAll('.conversation-item button').forEach(button => {
                 button.addEventListener('click', (e) => {
                     e.stopPropagation();
                     const item = button.closest('.conversation-item');
                     item.style.transform = 'translateX(-100%)';
                     item.style.opacity = '0';
                     setTimeout(() => item.remove(), 300);
                 });
             });

             // 初始化图表
             const ctx = document.getElementById('aqiChart').getContext('2d');
             const gradient = ctx.createLinearGradient(0, 0, 0, 250);
             gradient.addColorStop(0, 'rgba(99, 102, 241, 0.3)');
             gradient.addColorStop(1, 'rgba(99, 102, 241, 0.05)');

             const aqiChart = new Chart(ctx, {
                 type: 'line',
                 data: {
                     labels: ['1月11日', '1月12日', '1月13日', '1月14日', '1月15日'],
                     datasets: [{
                         label: 'AQI指数',
                         data: [58, 73, 68, 52, 45],
                         borderColor: 'rgb(99, 102, 241)',
                         backgroundColor: gradient,
                         borderWidth: 3,
                         tension: 0.4,
                         fill: true,
                         pointBackgroundColor: 'rgb(99, 102, 241)',
                         pointBorderColor: '#fff',
                         pointBorderWidth: 2,
                         pointRadius: 6,
                         pointHoverRadius: 8
                     }]
                 },
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
                     plugins: {
                         legend: {
                             display: true,
                             position: 'top',
                             labels: {
                                 usePointStyle: true,
                                 padding: 20
                             }
                         }
                     },
                     scales: {
                         y: {
                             beginAtZero: true,
                             max: 100,
                             title: {
                                 display: true,
                                 text: 'AQI指数',
                                 font: {
                                     size: 12
                                 }
                             },
                             grid: {
                                 color: 'rgba(0, 0, 0, 0.05)'
                             }
                         },
                         x: {
                             title: {
                                 display: true,
                                 text: '日期',
                                 font: {
                                     size: 12
                                 }
                             },
                             grid: {
                                 display: false
                             }
                         }
                     },
                     interaction: {
                         intersect: false,
                         mode: 'index'
                     }
                 }
             });

             // 模拟处理进度更新
             function simulateProcessing() {
                 const steps = [
                     { step: 2, progress: 40, status: 'completed' },
                     { step: 3, progress: 60, status: 'processing' },
                     { step: 4, progress: 80, status: 'pending' },
                     { step: 5, progress: 100, status: 'pending' }
                 ];

                 steps.forEach((stepData, index) => {
                     setTimeout(() => {
                         // 更新进度条
                         document.getElementById('progressBar').style.width = stepData.progress + '%';
                         document.getElementById('progressText').textContent = stepData.progress + '%';

                         // 更新处理节点
                         const node = document.querySelector(`[data-step="${stepData.step}"]`);
                         if (node) {
                             const iconContainer = node.querySelector('.w-6.h-6');
                             const statusSpan = node.querySelector('.text-xs.font-medium');

                             if (stepData.status === 'completed') {
                                 iconContainer.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
                                 iconContainer.className = 'w-6 h-6 rounded-full bg-green-500 flex items-center justify-center';
                                 statusSpan.textContent = '已完成';
                                 statusSpan.className = 'text-xs text-green-600 font-medium';
                             } else if (stepData.status === 'processing') {
                                 iconContainer.innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
                                 iconContainer.className = 'w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center';
                                 statusSpan.textContent = '处理中';
                                 statusSpan.className = 'text-xs text-blue-600 font-medium';
                             }

                             // 自动高亮对应的步骤
                             node.classList.add('active');
                             const panel = document.querySelector(`[data-result="${stepData.step}"]`);
                             if (panel) panel.classList.add('active');
                         }
                     }, (index + 1) * 2500);
                 });
             }

             // 页面加载后开始模拟
             setTimeout(simulateProcessing, 1500);

             // 复制功能
             document.querySelectorAll('.fa-copy').forEach(copyBtn => {
                 copyBtn.addEventListener('click', (e) => {
                     e.stopPropagation();
                     const codeBlock = copyBtn.closest('.result-panel').querySelector('pre');
                     if (codeBlock) {
                         navigator.clipboard.writeText(codeBlock.textContent).then(() => {
                             copyBtn.className = 'fas fa-check text-green-500';
                             setTimeout(() => {
                                 copyBtn.className = 'fas fa-copy';
                             }, 2000);
                         });
                     }
                 });
             });
         </script>
     </body>
     </html>
